@import "variable";
@import "fonts";
@import "layout";
@import "forms";
@import "buttons";
@link-color: #3962FF;
@link-hover-color: #E17152;

//@axis-color: #BDC3CD;

/* region Generate .color@{n}-@{i}  function  */

.generate-colors(@n; @i: 1) when (@i =< @n) {

    .tau-chart__svg .color@{n}-@{i} {
        stroke: extract(@category-colors, @i);
        fill: extract(@category-colors, @i);
    }

    .generate-colors(@n; (@i + 1));
}

.generate-colors(@list_category-colors);
.tau-chart__svg {
    .color-default {
        stroke: @default-color;
        fill: @default-color;
    }
}

/* endregion */

/* region Generate .line-params-@{n}  function  */

.generate-line-params(@params; @default-size; @step; @n; @i: 1) when (@i =< @n) {

    .tau-chart__line-@{params}-@{i} {
        stroke-@{params}: @default-size;
    }

    .generate-line-params(@default-size: (@default-size + @step); @params; @step; @n; (@i + 1));
}

/* Generate .line-size-@{n} */
.generate-line-params(@params: width; @default-size: 1px; @step: 0.5px; @n: 5);

/* Generate .line-opacity-@{n} */
.generate-line-params(@params: opacity; @default-size: 1; @step: -0.05; @n: 5);

/* endregion */

/* endregion */

.tau-chart {
    /* Links */
    a {
        color: @link-color;
        border-bottom: 1px solid fade(@link-color, 30%);
        text-decoration: none;

        &:hover {
            color: @link-hover-color;
            border-bottom: 1px solid fade(@link-hover-color, 30%);
        }
    }

    &__time-axis-overflow {
        .tick:nth-child(even) {
            display: none;
        }
    }

    /* Axises and Grid */
    &__svg {
        display: block;
        overflow: hidden;

        .place {
            fill: #fff;
            stroke: #000;
            stroke-opacity: 0.7;
            stroke-width: 0.5;
        }

        .place-label {
            opacity: 0.7;
            font-size: @font-size-xs;
            color: #000000;
            line-height: 13px;
            text-anchor: start;
        }

        .place-label-countries,
        .place-label-subunits,
        .place-label-states {
            text-anchor: middle;
            font-size: @font-size-xxs;
            fill: fade(@font-color, 50%);
            line-height: 10px;
            text-transform: capitalize;
        }

        .map-contour-level path {
            stroke-opacity: 0.5;
            stroke-linejoin: 'round';
        }
        .map-contour-level-0 path {
            stroke: @map-contour-stroke-color0;
        }
        .map-contour-level-1 path {
            stroke: @map-contour-stroke-color1;
        }
        .map-contour-level-2 path {
            stroke: @map-contour-stroke-color2;
        }
        .map-contour-level-3 path {
            stroke: @map-contour-stroke-color3;
        }
        .map-contour-level-4 path {
            stroke: @map-contour-stroke-color4;
        }


        .map-contour-highlighted,
        .map-contour:hover {
            fill: @map-fill-color-highlighted;
        
            path {
                stroke: @map-contour-stroke-color-highlighted; 
            }

            text {
                fill: @map-text-color-highlighted;
            }
        }



        .axis {
            line,
            path {
                stroke-width: 1;
                fill: none;
                stroke: @axis-color;
                shape-rendering: crispEdges;
            }
        }
        .axis.facet-axis {
            .tick {
                line {
                    opacity: 0;
                }

                line.label-ref {
                    opacity: 1;
                }

                text {
                    font-size: @font-size-s;
                    font-weight: 600;
                }
            }
            path.domain {
                opacity: 0;
            }
        }
        .axis.facet-axis.compact {
            .tick {
                text {
                    font-weight: normal;
                }
            }

            .label {
                font-weight: normal;

                .label-token {
                    font-weight: normal;
                }
            }
        }
        .tick text {
            font-size: @font-size-xs;
        }
        .grid {
            .grid-lines {
                path {
                    shape-rendering: crispEdges;
                }
            }
            .line path,
            path.line,
            path.domain {
                fill: none;
            }
            .tick > line,
            .extra-tick-line {
                fill: none;
                stroke: @axis-color;
                stroke-width: 1px;
                shape-rendering: crispEdges;
            }
            .tick.zero-tick > line {
                stroke: mix(@axis-color, @font-color, 82.5%);
            }
            .line path {
                shape-rendering: auto;
            }
            .cursor-line {
                shape-rendering: crispEdges;
                stroke: mix(@font-color, @bg-color, 40%);
                stroke-width: 1px;
            }
        }
        .label {
            font-size: @font-size-s;
            font-weight: 600;

            .label-token {
                font-size: @font-size-s;
                font-weight: 600;
                text-transform: capitalize;
            }

            .label-token-1,
            .label-token-2 {
                font-weight: normal;
            }

            .label-token-2 {
                fill: gray;
            }

            .label-token-delimiter {
                font-weight: normal;
                fill: gray;
            }
        }
        .label.inline {
            .label-token {
                font-weight: normal;
                fill: gray;
                text-transform: none;
            }
        }
        .brush .selection {
            fill-opacity: .3;
            stroke: #fff;
            shape-rendering: crispEdges;
        }
        .background {
            stroke: @parallel-background-line-color;
        }
    }

    /* Scatterplot  */
    &__dot {
        opacity: @dot-opacity;
        stroke-width: 0;
        transition: stroke-width 0.1s ease, opacity 0.2s ease;
    }

    /* Linechart  */
    &__line {
        fill: none;
        transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
    }
    &__dot-line {
        opacity: 1;
        transition: stroke-opacity 0.2s ease;
    }
    /*  Bar  */
    &__bar {
        opacity: 0.7;
        shape-rendering: geometricPrecision;
        stroke-opacity: 0.5;
        stroke-width: 1;
        stroke: #fff;
        transition: opacity 0.2s ease;
    }

    &__area {
        transition: opacity 0.2s ease;

        path:not(.i-data-anchor),
        polygon {
            opacity: 0.6;
            transition: stroke-opacity 0.2s ease, stroke-width 0.2s ease;
        }
    }

    /* TODO: fix to avoid conflict on "stroke" with color brewer */
    /* TODO: remove this when CSS for color brewer is fixed */
    .tau-chart__svg &__bar {
        stroke: #fff;
    }

    /*  PLUGINS  */

    /*  Highlighter  */
    &__dot&__highlighted {
        stroke-width: 1;
        opacity: 1;
    }

    &__dot&__dimmed {
        opacity: 0.2;
    }

    &__line&__highlighted {
        stroke-opacity: 1;
        stroke-width: 3;
    }

    &__line&__dimmed {
        stroke-opacity: 0.2;
    }

    .i-role-label&__highlighted,
    &__area&__highlighted,
    &__bar&__highlighted {
        stroke-opacity: 1;
        opacity: 1;
    }

    .i-role-label&__dimmed,
    &__area&__dimmed,
    &__bar&__dimmed {
        opacity: 0.2;
    }
}